// 简答题一  工程化
// 工程化是提高工作效率，降低成本的一种手段。
// 工程化可以减轻以前重复的工作，通过工程化工具，可以将重复的代码封装成组件快速使用
// 工程化可以统一代码风格，提高代码质量
// 工程化可以减少开发时对后端的依赖

// 简答题二 脚手架的意义
// 创建相同的项目结构
// 提供项目规范和约定（相同的基础代码，工具配置，项目依赖，结构目录等）

// 编程题
// 概述脚手架实现过程 
// 执行脚手架命令》》回答相关问题》》根据回答配置相关文档，生成项目
// （1）创建目录 mdongtest

// （2）创建 package.json

// yarn init 

// （3）在package.json中添加bin字段，指定cli文件的入口文件: “bin”:"cli.js"

// {
//   "name": "mdongtest",
//   "version": "1.0.0",
//   "bin":"cli.js",
//   "main": "index.js",
//   "license": "MIT"
// }
// （4）安装所需依赖

//  yarn add inquirer
//  yarn add ejs

// （5）创建cli.js文件

// #!/usr/bin/env node
// NODE CLI 应用入口文件必须要有这样的文件名
// console.log('cli,working~~~')  //测试

/**
 * 脚手架的工作流程
 * 1、通过命令行交互询问用户问题
 * 2、根据用户回答的结果生成文件
 */
const path = require('path')
const inquirer = require('inquirer')
const fs = require('fs')
const ejs = require('ejs')

inquirer.prompt([
     {
         type: 'input',
         name: 'name',
         message: 'Project name?'
     }
 ]).then(anwsers => {
   //  console.log(anwsers)  // { name: 'myName' }
   // 根据用户回答的结果生成文件

    //模板目录
    const temDir = path.join(__dirname,'templates')
    //目标目录
    const destDir = process.cwd()
    fs.readdir(temDir,(err,files)=>{
        if (err) throw err
        files.forEach(file => {
            // console.log(file)
            //通过模板引擎渲染文件
            ejs.renderFile(path.join(temDir,file),anwsers,(err,result) => {
                if(err) throw err
                fs.writeFileSync(path.join(destDir,file),result)
            })
        });
    })
 })

// （6）templates/index.html

// <!DOCTYPE html>
// <html lang="en">
// <head>
//     <meta charset="UTF-8">
//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
//     <title>name</title>
// </head>
// <body>
// </body>
// </html>

// （7）yarn link关联到全局变量

// yarn link

// （8）执行测试

// mkdir test  //创建测试文件夹
// cd test    //切换文件夹
// mdongtest   //执行脚手架

// 2、尝试使用 Gulp 完成项目的自动化构建

// gulp自动化构建演示

// （1）准备工作

// mkdir my-gulp
// cd my-gulp
// yarn init --yes  //初始化package文件

// （2）安装gulp

// yarn add gulp --dev //安裝gulp模块

// （3）创建gulpfile.js文件

// gulpfile.js
//gulp的入口文件
//导入文件路径API
const { dest, src,series,parallel,watch } = require('gulp')
const loadPlugins = require('gulp-load-plugins')

const browserSync = require('browser-sync')

const plugin = new loadPlugins()
const bs = browserSync.create()


const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}


const clean = () => {
  return del(['dist', 'temp'])
}

const style = () => {
  /**
   * 但是并没有与src一样的路径。所以需要指定 {base：'src'}
   */
  return src('src/assets/styles/*.scss', { base: 'src' }).pipe(plugin.sass())
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' }).pipe(plugin.babel({
    presets: ['@babel/preset-env']
  }))
    .pipe(dest('dist'))
}

const page = () => {
  return src("src/*.html", { base: 'src' }).pipe(plugin.swig({data})).pipe(dest('dist'))
}

const image = () => {
  return src("src/assets/images/**", { base: 'src' }).pipe(plugin.imagemin()).pipe(dest('dist'))
}

const fonts = () => {
  return src("src/assets/fonts/**", { base: 'src' }).pipe(plugin.imagemin()).pipe(dest('dist'))
}

const extra = () => {
  return src("public/**", { base: 'public' }).pipe(dest('dist'))
}

const serve = () => {
  watch("src/assets/styles/*.scss",style)
  watch("src/assets/scripts/*.js",script)
  watch("src/*.html",page)
  // watch("src/assets/images/**",image)
  // watch("src/assets/fonts/**",fonts)
  // watch("public/**",extra)
  watch([
    'src/assets/images/**',
    'src/assets/scripts/*.js',
    'src/*.html'
  ],bs.reload)

  bs.init({
    server: {
      port:8080,
      // baseDir: 'dist',
      baseDir:["dist","public","src"],
      files:'dist/**',
      // open:false,
      routes: {
        '/node_modules': "node_modules"
      }
    }
  })
}
const compile = parallel(page, script)

//上线之前执行的任务
const build = parallel(compile,fonts,image,extra)

const develop = series(compile,serve)

module.exports = {
  clean,
  compile,build,develop
}

// （4）package.json

// {
//   "name": "zce-gulp-demo",
//   "version": "1.0.0",
//   "main": "index.js",
//   "repository": "https://github.com/zce/zce-gulp-demo.git",
//   "author": "张艳杰0310 <1628480502@qq.com>",
//   "license": "MIT",
//   "scripts": {
//     "clean":"gulp clean",
//     "build":"gulp build",
//     "develop":"gulp develop"
//   },
//   "devDependencies": {
//     "@babel/core": "^7.10.4",
//     "@babel/preset-env": "^7.10.4",
//     "bootstrap": "4.0.0-alpha.6",
//     "browser-sync": "^2.26.7",
//     "gulp": "^4.0.2",
//     "gulp-babel": "^8.0.0",
//     "gulp-clean-css": "^4.3.0",
//     "gulp-htmlmin": "^5.0.1",
//     "gulp-if": "^3.0.0",
//     "gulp-imagemin": "^7.1.0",
//     "gulp-load-plugins": "^2.0.3",
//     "gulp-rename": "^2.0.0",
//     "gulp-swig": "^0.9.1",
//     "gulp-uglify": "^3.0.2"
//   }
// }

// 3、使用 Grunt 完成项目的自动化构建

// grunt自动化构建


// （1）准备工作
// mkdir my-grunt
// cd my-grunt
// yarn init --yes  //初始化package文件

// （2）安装gulp

// yarn add grunt --dev //安裝gulp模块

// （3）安装所需插件

//將sass转化为浏览器可识别的css文件    
// yarn add grunt-sass sass -dev
//将ECMAScript新特性转化
// yarn add grunt-babel @babel/core @babel/preset-env --dev
//自动载入文件
// yarn add load-grunt-tasks --dev
//监视文件变化
// yarn add grunt-contrib-watch --dev
//清除指定文件夹下的文件
// yarn add grunt-contrib-clean --dev
//浏览器
// yarn add browser-sync --dev
//html文件编译处理
// yarn add grunt-web-swig --dev 

// （3）创建gruntfile.js文件

//Grunt的入口文件
//用于定义一些需要Grunt自动执行的任务
//需要导出一个函数，接收一个grunt的参数
/**
 * yarn add grunt-contrib-clean
 * 自动清除临时文件
 */
const sass = require("sass")
const loadGruntTasks = require("load-grunt-tasks")
const browserSync = require("browser-sync")
const bs = browserSync.create()

module.exports = grunt => {
    grunt.initConfig({
        //sass转化为css功能
        sass: {
            options: {
                sourceMap: true, //设置后会生成相应的sourceMap文件
                implementation: sass
            },
            main: {
                files: {
                      // 目标文件：源文件
                    'dist/css/main.css': 'src/scss/main.scss'
                }
            }
        },
        //js转化功能
        babel: {
            options: {
                sourceMap: true,//设置后会生成相应的sourceMap文件
                presets: ["@babel/preset-env"]
            },
            main: {
                files: {
                    // 目标文件：源文件
                    'dist/js/app.css': 'src/js/app.js'
                }
            }
        },
        web_swig: {
            options: {
                swigOptions: {
                    //缓存设置为false
                    cache: false
                },
                getData: function (tpl) {
                    //模板文件的数据
                    return { myGruntTitle: 'hello,grunt-web-swig' };
                }
            },
            main: {
                expand: true,
                cwd: 'src/',//源文件文件夹
                src: "**/*.html",//后缀名匹配
                dest: "dist/"//目标文件夹
            },
        },
        //监视功能
        watch: {
            js: {
                //文件地址
                files: ['src/js/*.js'],
                //执行的任务
                tasks: ['babel']
            },
            css: {
                //文件地址
                files: ['src/scss/*.scss'],
                //执行的任务
                tasks: ['sass']
            },
            html: {
                //文件地址
                files: ['src/*.html'],
                //执行的任务
                tasks: ['web_swig', 'bs-reload']
            }
        },
        //清除功能
        clean: {
            //所要清除的文件路径
            files: 'dist/**'
        }
    })

    // grunt.loadNpmTasks('grunt-sass')
    loadGruntTasks(grunt) //自动加载所有的grunt插件
    grunt.registerTask('default', ['clean', 'sass', 'babel', 'watch'])
    grunt.registerTask('bs-reload', function () {
        bs.reload()
    })
    grunt.registerTask('bs', function () {
        const done = this.async()
        bs.init({
            server: {
                port: 8080,
                // baseDir: 'dist',
                baseDir: ["dist", "public", "src"],
                files: 'dist/**',
                // open:false,
                routes: {
                    '/node_modules': "node_modules"
                }
            }
        })
    })
    grunt.registerTask('compile', ['clean', 'sass', 'babel'])
}

// （4）package.json

// 将命令通过scripts进行暴露，例如：可以直接“yarn clean”进行文件的清除

// {
//   "name": "my-grunt",
//   "version": "0.1.0",
//   "main": "index.js",
//   "license": "MIT",
//   "scripts": {
//       // yarn clean ---->清除dist文件夹
//     "clean":"grunt clean",
//       // yarn compile ---->编译
//     "compile":"grunt compile",
//       //yarn reload ----->重载
//     "reload":"grunt bs-reload"
//   },
//   "dependencies": {
//     "@babel/core": "^7.10.4",
//     "@babel/preset-env": "^7.10.4",
//     "grunt": "^1.2.1",
//     "grunt-babel": "^8.0.0",
//     "grunt-sass": "^3.1.0"
//   },
//   "devDependencies": {
//     "browser-sync": "^2.26.7",
//     "grunt-contrib-clean": "^2.0.0",
//     "grunt-contrib-watch": "^1.1.0",
//     "grunt-tasks": "^1.0.0",
//     "grunt-web-swig": "^0.3.1",
//     "load-grunt-tasks": "^5.1.0",
//     "sass": "^1.26.10"
//   }
// }